<template>
	<div class="yh_content">
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px; margin-top: 20px">
			<div>
				<div class="block yh_dis" style="margin-top: 10px">
					<div>
						<div class="hei20 yh_qs yh_font13">发卡时间</div>
						<el-date-picker v-model="search.birthday_start" style="width: 140px" size="small" type="date"
							placeholder="开始时间" />
						<el-date-picker v-model="search.birthday_end" style="width: 140px; margin-left: 5px"
							size="small" type="date" placeholder="截至日期" />
					</div>
					<div style="margin-left: 10px">
						<div class="hei20 yh_qs yh_font13">推荐人</div>
						<el-input v-model="search.name" placeholder="姓名/手机号" size="small" />
					</div>
					<div style="margin-left: 10px">
						<el-button type="primary" @click.stop="getList" class="bac6b7 mar-top20"
							size="small">搜索</el-button>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 20px">
			<el-table :data="tableData" v-loading="listLoading" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="staff_name" label="推荐办卡人" />
				<el-table-column prop="realname" label="办卡人" />
				<el-table-column prop="card_number" label="卡号" />
				<el-table-column prop="card_name" label="卡名称" />
				<el-table-column prop="charge_card_receipts_money" label="实收金额" />
				<el-table-column prop="cards_hairpin" label="发卡时间" />
				<el-table-column label="卡状态">
					<template slot-scope="scope">
						<span v-if="scope.row.card_state === 1">正常</span>
						<span v-if="scope.row.card_state === 2">请假</span>
						<span v-if="scope.row.card_state === 3">过期</span>
						<span v-if="scope.row.card_state === 4">未开卡</span>
						<span v-if="scope.row.card_state === 5">挂失</span>
						<span v-if="scope.row.card_state === 6">退卡</span>
						<span v-if="scope.row.card_state === 7">停卡</span>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		recommendCardUser
	} from '@/api/member'
	export default {
		name: 'referrer',
		components: {
			Pagination
		},
		data() {
			return {
				total: 0,
				listLoading: false,
				search: {
					birthday_start: '', // 发卡开始时间
					birthday_end: '', // 发卡结束时间
					name: null,
				},
				tableData: [],
				listQuery: {
					page: 1,
					limit: 0
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '会员卡',
				url: '/member/membercard',
				pd: true
			}, {
				name: '推荐办卡人',
				url: '/member/referrer',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 1
			})
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true;
				var date = {
					'page': this.listQuery.page,
					'keyword': this.search.name,
					'start_time': this.search.birthday_start,
					'end_time': this.search.birthday_end,
				}
				recommendCardUser(date).then(response => {
					const {
						data
					} = response
					this.tableData = data.data
					this.total = data.total
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: rgb(32, 146, 48);
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}
</style>